<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu active-text-color="#ffd04b" background-color="#32065" class="el-menu-vertical-demo"
                default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
                <el-sub-menu :index="item.id+''" v-for="item in menuData" :key="item.id">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="child in item.children" :key="child.id" :index="child.id+''"
                        @click="menuSwitch(child.url, item.name, child.name)">{{ child.name }}
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
import service from '@/request';
import router from '@/router';
export default {
    data() {
        return {
            isAdmin: false,
            isAuditor: false,
            //说明如果是一级路由，path不为空、childs为空，如果是二级路由path为空，childs不为空
            menuData: []
        }
    },

    methods: {
        handleOpen(key, keyPath) {

        },
        handleClose(key, keyPath) {

        },
        menuSwitch(path, label1, label2) {
            //如果菜单选择的路由是当前当前，就停止
             //if(route.path==path)return
            //跳转到选择的路由上
            router.push(path)
            this.$emit('SetLabel', label1, label2)
        },
        menusGet() {
            service.get("/User/getMenu?userId="+JSON.parse(localStorage.getItem('userId'))).then(
                res => {
                    this.menuData.push(...res.value)
                },
                error => {
                    alert("菜单列表获取失败")
                })
        }
    },
    mounted() {
        this.menusGet()
    }
}
</script>

<style>
.el-menu {
    border: none;
}

.tac {
    height: 100%;

}
</style>